<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    function d2a(n){
      return n*Math.PI/180;
    }
    window.onload=function (){
      var oSvg=document.getElementById('svg1');
      var cx=400,cy=300,r=200;

      var data=[800, 600, 1200, 3500, 2800, 500];

      var sum=0;
      for(var i=0;i<data.length;i++){
        sum+=data[i];
      }

      var now=0;
      for(var i=0;i<data.length;i++){
        var item=data[i];
        var ang=360*item/sum;

        var color=Math.floor(Math.random()*16777216).toString(16);
        while(color.length<6)color='0'+color;
        //pie(now, now+ang, `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`);
        pie(now, now+ang, '#'+color);
        now+=ang;
      }

      function pie(ang1, ang2, color){
        var oP=document.createElementNS('http://www.w3.org/2000/svg', 'path');
        oP.style.fill=color;

        oSvg.appendChild(oP);

        calcD(r);
        function calcD(r){
          var arr=[];

          function getPoint(ang){
            return {
              x: cx+Math.sin(d2a(ang))*r,
              y: cy-Math.cos(d2a(ang))*r,
            }
          }
          //#1
          var pos=getPoint(ang1);
          var x1=pos.x,y1=pos.y;

          //arr.push(`M ${cx} ${cy} L ${x1} ${y1}`);
          arr.push('M '+cx+' '+cy+' L '+x1+' '+y1);

          //#2
          var pos=getPoint(ang2);
          var x2=pos.x,y2=pos.y;
          //        A  rx   ry  x旋转 大弧 镜像 终点x    y
          //arr.push(`A ${r} ${r}   0    0    1   ${x2} ${y2}`);
          //arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);
          arr.push('A '+r+' '+r+' 0 '+(ang2-ang1>=180?1:0)+' 1 '+x2+' '+y2);

          //#3
          arr.push('Z');

          oP.setAttribute('d', arr.join(' '));
        }

        var curR=r;

        var fnNext=null;

        var size=10;
        //
        function move(end){
          var start=curR;
          var dis=end-start;
          var count=0;

          fnNext=function (){
            count++;

            var a=1-count/size;

            curR=start+dis*(1-a*a*a);

            calcD(curR);

            if(count>=size){
              fnNext=null;
            }
          };
        }
        oP.onmouseover=function (){
          move(r*1.25);
        };
        oP.onmouseout=function (){
          move(r);
        };

        next();
        function next(){
          fnNext && fnNext();

          requestAnimationFrame(next);
        }
      }
    };
    </script>
  </head>
  <body>
    <svg width="800" height="600" id="svg1"></svg>
  </body>
</html>
